<layout name="layout"/>

<div class="tab-div">
    <div id="tabbar-div">
        <p>
            <span class="tab-front">通用信息</span>
            <span class="tab-back" >商品描述</span>
            <span class="tab-back">会员价格</span>
            <span class="tab-back">商品相片</span>
            <span class="tab-back">商品属性</span>
        </p>
    </div>
    <div id="tabbody-div">
        <form enctype="multipart/form-data" action="__SELF__" method="post">
            <table width="90%" class="tab_table" id="general-table" align="center">

                <tr>
                    <td class="label">上级分类：</td>
                    <td>
                        <select name="cat_id">
                            <option value="">选择分类</option>
                         <foreach name="catdata" item="v">
                            <option  value="{$v['id']}"> <?php echo str_repeat('-',8*$v['level']).$v['cat_name'];?> </option>
                             </foreach>
                        </select>
                        <span class="require-field">*</span>
                    </td>
                </tr>

                <tr>
                    <td class="label">拓展分类： <input onclick="$('#cat_list').append($('#cat_list').find('select').eq(0).clone())"  type="button" value="添加分类" id="but_add_cat"/></td>
                               <!--找到cat_list 在cat_list下面克隆一个select append（选中元素的后面添加一个）找到某个元素 第几个 进行克隆-->
                    <td id="cat_list">
                        <select name="ext_cat_id[]">
                            <option value="">选择分类</option>
                            <foreach name="catdata" item="v">
                                <option  value="{$v['id']}"> <?php echo str_repeat('-',8*$v['level']).$v['cat_name'];?> </option>
                            </foreach>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td class="label">商品品牌：</td>
                    <td>
                        <select  name="brand_id">
                            <option value="">请选择</option>
                                <foreach name="brandData" item="val">
                                   <option value="{$val['id']}">{$val['brand_name']}</option>
                               </foreach>
                    </select>
                    </td>
                </tr>
                <tr>
                    <td class="label">商品名称：</td>
                    <td><input type="text" name="goods_name" value="" size="60" />
                    <span class="require-field">*</span></td>
                </tr>
                    <td class="label">本店售价：</td>
                    <td>
                        <input type="text" name="shop_price" value="0" size="20"/>
                        <span class="require-field">*</span>
                    </td>
                <tr>
                    <td class="label">是否上架：</td>
                    <td>
                        <input type="radio" name="is_on_sale" value="是" checked="checked"/> 是
                        <input type="radio" name="is_on_sale" value="否"/> 否
                    </td>
                </tr>


                <tr>
                    <td class="label">促销价格：</td>
                    <td>
                       <p> 价 &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;格：¥<input type="text"  name="promote_price" value=""/>&nbsp;元</p>
                        <p>开始时间：<input type="text" id="promote_start_date"  name="promote_start_date" value=""/></p>
                        结束时间：<input type="text" id="promote_end_date"  name="promote_end_date" value=""/>
                    </td>
                </tr>
                <tr>
                    <td class="label">是否新品：</td>
                    <td>
                        <input type="radio" name="is_new" value="是"/>是
                        <input type="radio" name="is_new" value="否" checked="checked"/>否
                    </td>
                </tr>
                <tr>
                    <td class="label">是否精品：</td>
                    <td>
                        <input type="radio" name="is_best" value="是" />是
                        <input type="radio" name="is_best" value="否" checked="checked" />否
                    </td>
                </tr>
                <tr>
                    <td class="label">是否热卖：</td>
                    <td>
                        <input type="radio" name="is_hot" value="是"/>是
                        <input type="radio" name="is_hot" value="否" checked="checked"/>否
                    </td>
                </tr>
                <tr>
                    <td class="label">推荐到楼层：</td>
                    <td>
                        <input type="radio" name="is_floor" value="是"/>是
                        <input type="radio" name="is_floor" value="否" checked="checked"/>否
                    </td>
                </tr>








                <tr>
                    <td class="label">商品排序：</td>
                    <td>
                        <input type="text" name="sort_num" value="100" size="8" />
                    </td>
                </tr>




                <tr>
                    <td class="label">市场售价：</td>
                    <td>
                        <input type="text" name="market_price" value="0" size="20" />
                    </td>
                </tr>
            </table>
                <!--商品描述-->
            <table style="display: none" width="90%" class="tab_table" id="general-table" align="center">
                <tr>
                    <!--<td class="label">商品描述：</td>-->
                    <td>
                        <textarea id="goods_desc" name="goods_desc"></textarea>
                    </td>
                </tr>
            </table>
            <!--会员价格-->
            <table style="display: none"  width="90%" class="tab_table" id="general-table" align="center">
                </tr>
                <td class="label">会员价格：</td>
                <td>
                    <foreach name="mlData" item="mlv">
                        {$mlv['level_name']}: ¥ <input type="text" name="member_price[{$mlv['id']}]" value="" size="8"/> &nbsp;元<br/>
                    </foreach>
                </td>
                </tr>
            </table>
            <!--商品图片-->
            <table style="display: none"  width="90%" class="tab_table" id="general-table" align="center">
                <tr>
                    <td class="label">商品logo：</td>
                    <td><input type="file" name="logo" value="" size="60" /></td>
                </tr>
            </table>
            <!--会员属性-->
            <table width="90%" class="tab_table" id="general-table" align="center">
                <tr>
                    <td>
                        <select name="type_id">
                    <option value="">请选择...</option>
                    <foreach name="tylist" item="tv">
                            <option  value="{$tv['id']}">{$tv['type_name']}</option>
                    </foreach>
                </select>
                </td>
                </tr>
                <tr>
                    <td>
                        <ul id="attr_list"></ul>
                    </td>
                </tr>
            </table>

            <div class="button-div">
                <input type="submit" value=" 确定 " class="button"/>
                <input type="reset" value=" 重置 " class="button" />
            </div>
        </form>
    </div>
</div>

<link href="__PUBLIC__/umeditor1_2_2-utf8-php/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="__PUBLIC__/umeditor1_2_2-utf8-php/third-party/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/umeditor1_2_2-utf8-php/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/umeditor1_2_2-utf8-php/umeditor.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/umeditor1_2_2-utf8-php/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="__PUBLIC__/JQuery/jquery-1.8.3.min.js/"></script>

<script type="text/javascript">
    var um =  UM.getEditor('goods_desc',{
        initialFrameWidth:980,
        initialFrameHeight:160
    });

//    切换表单
    $('#tabbar-div p span').click(function(){
        var i = $(this).index();//js自带的index方法 第几个
        $('.tab_table').hide();    //先隐藏所有的div  后面点击那个显示哪个
        $('.tab_table').eq(i).show();  //显示第i个table
//        $('.tab_table').eq(i).siblings().hide();    //隐藏其他几个TABLE  siblings 表示获取除了自己以外的所有同辈的兄弟标签

        $('.tab-front').removeClass('tab-front').addClass('tab_back');   //先选者被选中的 删除样式 添加普通样式 后面在选者的时候删除普通样式 添加需要样式
        $(this).removeClass('tab_back').addClass('tab-front');           //选者当前按钮 就删除当前按钮的样式 并且添加其他的样式
    });


//
//    $('#but_add_cat').click(function(){
//        $('#cat_list').append($('#cat_list').find('select').eq(0).clone());
//    })

</script>

<script type="text/javascript">
    //为下来框绑定一个change的事件
    $("select[name=type_id]").change(function(){
        var type_id = $(this).val();
//        alert(type_id);
//        if(type_id>0) {
            $.ajax({
                type: "get",
                url: "<?php echo U('ajaxGetAttr','',FALSE)?>/type_id/" + type_id, //不要后缀  并且把这个类型的id传过去
                dataType: "json",
                success: function (data) {
                    //data就是返回得到的数据  把服务器返回的数据循环拼出一个li字符串  显示在页面
//                    console.log(data);                        //获得的是对象需要循环
                    var li = "";
                    $(data).each(function (k, v) {           //k 是字段名称 v是字段内的信息
//                        console.log(v);
                    li += '<li>';
                    if (v.attr_type !== "") {
                    li += '<a onclick="addNewAttr(this);">[+]</a>';              //如果属性类型字段里面是可选的 就拼一个+号
                    li += v.attr_name + '：';                 //+号后面拼出属性的名称
                    if (v.attr_option_values ==""){
                        //如果可选值的字段是空的 就拼出一个文本框
                        // 把属性id放到名称的下标中 以便存入属性表中
                    li += '<input type="text" name="attr_value['+ v.id+'][]" value=""/>';
                    } else {
                    li += '<select name="attr_value['+ v.id+'][]"> <option value="">请选择...</option>';    //不然就是一个下拉框
                    // 如果要选择 就把可选值 转化为数组 循环输出 在js中以逗号转化为数组 不是在php中
                    var _attr = v.attr_option_values.split(',');  //调用split函数就可以了
//                        console.log(_attr);
                    //循环数组中得每个值在js中没有foreach
                    for (var i = 0; i < _attr.length; i++) {

                    li += '<option name="" value="' + _attr[i] + '">';             //数组名+下标 取出对应下标值
                    li += _attr[i];
                    li += '</option>';
                    }
                    li += '</select>'
                    }
                    }
                    li += '</li>';
                    });
                    //把拼好的li放到指定的位置去
                    $("#attr_list").html(li);
                }

            });
//        }

    });

    /*************克隆li标签 类型*******************/
    function addNewAttr(a){
        //事件绑定的是a标签  要克隆的是li标签 所有先要找到li标签
        //a 不是jquery中的对象 所有要转换
        var li = $(a).parent();
        /*********如果a标签里的内容是+ 就克隆 并且把新克隆的a标签里的内容变成—号*   不然就移出li   **********/
        if($(a).text()=='[+]'){
        var newli = li.clone();               //注意克隆的是li标签 不是a 这里不能是$(a)
        //克隆之后 +变—
        //在选中a的时候 还是一如是用选者节点的方式选中 因为a本来就是节点标签
        //这里意思 在新的li标签里面找到a标签 把a标签里面的内容改变为—号
        newli.find("a").text('[-]');
        }else{
            li.remove();
        }
        //在把克隆出来的放在原来li的后面
        li.after(newli);
    }

</script>


<script type="text/javascript" src="__PUBLIC__/JQuery/jquery-1.8.3.min.js" charset="UTF-8"></script>

<script type="text/javascript" src="__PUBLIC__/bootstrap/js/bootstrap-datetimepicker.min.js"></script>

<script type="text/javascript" src="__PUBLIC__/bootstrap/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>

<script type="text/javascript" src="__PUBLIC__/bootstrap/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript" src="__PUBLIC__/bootstrap/js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

<link rel="stylesheet" type="text/css" href="__PUBLIC__/bootstrap/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/bootstra/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/bootstra/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/bootstra/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/bootstra/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/bootstra/css/bootstrap-datetimepicker.css">

<script type="text/javascript">
    $('#promote_start_date').datetimepicker({
        show: true,
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
        weekStart: 1,
        autoclose: true,
        orientation:'right',
        todayBtn:'linked'
    });
    $('#promote_end_date').datetimepicker({
        show: true,
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
        weekStart: 1,
        autoclose: true,
        orientation:'right',
        todayBtn:'linked'
    });
</script>